<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>gis_hcj</title>
    <link href="https://lib.baomitu.com/ol3/4.6.5/ol.css" rel="stylesheet" type="text/css" />
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #mapCon
        {
            width: 100%;
            height: 95%;
            position: absolute;
        }
        .ol-zoomslider{
            top:7.5em
        }
    </style>
</head>
<body>
    <div id="mapCon">
    </div>
    <script type="text/javascript">
        var gaodeMapLayer = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });

        var map = new ol.Map({
            layers: [gaodeMapLayer],
            view: new ol.View({
                center:  [114.30, 30.50],
                projection: 'EPSG:4326',
                zoom: 8,
                minZoom:1
            }),
            target: 'mapCon'
        });
        const zoomToExtent = new ol.control.ZoomToExtent({
            extent:[110,30,160,30]
        })
        map.addControl(zoomToExtent)
        var zoomslider = new ol.control.ZoomSlider();
        map.addControl(zoomslider);

        /*
        绘制矢量图的步骤
        */
       // 1.根据几何和样式信息绘制要素
        // const point = new ol.Feature({
        //     geometry:new ol.geom.Point([114.30,30.50])
        // })
        // let style = new ol.style.Style({
        //     image:new ol.style.Circle({
        //         radius:10,
        //         fill:new ol.style.Fill({
        //             color:'red'
        //         }),
        //         stroke:new ol.style.Stroke()
        //     })
        // })
        // point.setStyle(style)
        // // 将要素添加到矢量数据源
        // let source = new ol.source.Vector({
        //     features:[point]
        // })
        // // 将矢量数据源添加到矢量图层
        // let layer = new ol.layer.Vector({
        //     source
        // })
        // //map(layer(source(feature())))
        // //将矢量图层添加到矢量容器
        // map.addLayer(layer)


        //使用geojson数据
        var data = {
            type:"FeatureCollection",
            features:[
                {
                    type:"Feature",
                    geometry:{
                        type:"Point",
                        coordinates:[114.30,30.50]
                    }
                }
            ]
        }
        // 将数据添加到矢量数据源
        var sources = new ol.source.Vector({
            features:new ol.format.GeoJSON().readFeatures(data)
        })
        var layers = new ol.layer.Vector({
            source:sources
        })
        const pointstyle =new ol.style.Style({
            image:new ol.style.Circle,
            fill:new ol.style.Fill({
                color:"blue"
            })
        })
        layers.setStyle(pointstyle) 
        map.addLayer(layers)
    </script>
</body>
</html>
